<template>
  <!-- 弹窗 -->
  <el-dialog title="设置角色" :visible="showDialog" @close="closeFn">
    <!-- 内容 -->
    <el-tree ref="tree" check-strictly show-checkbox :data="rolesList" :props="{ label: 'title' }" node-key="id" />
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-button size="small" @click="closeFn">取消</el-button>
        <el-button size="small" type="primary" @click="submit">确定</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { getRolesList } from "@/api/roles";
import { getEmployeesDetail, redactEmployees } from "@/api/employees";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false // 默认值
    },
  },
  data() {
    return {
      rolesList: [], // 角色列表
      checkedList: [], // 选中的角色列表
      EmployeesId: ''
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    // 确认 设置角色
    async submit() {
      this.checkedList = this.$refs.tree.getCheckedKeys()
      //  console.log(38, '选中的选项', this.checkedList)
      await redactEmployees({
        id: this.EmployeesId,
        roles: this.checkedList
      })
      // 提示
      this.$message.success('设置角色成功')
      // 关闭弹窗
      this.closeFn()
    },
    // 获取员工角色详情
    async getEmployeesList(id) {
      // 存储id
      this.EmployeesId = id
      // 多级对象解构
      const { data: { roles } } = await getEmployeesDetail(id)
      console.log(roles);
      this.checkedList = roles.map(item => item.id)
      // console.log( this.checkedList);
      this.$refs.tree.setCheckedKeys(this.checkedList)
    },
    // 获取角色列表
    async getRolesList() {
      const { data } = await getRolesList()
      console.log(data);
      // 存储角色列表
      this.rolesList = data
    },
    closeFn() {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped>

</style>